@keyframes dolphinFly{
    0%{

        position: relative;
        left: 0;
        top: 50px;
        /*灰蓝色*/
        /*学员蓝*/
    }
    50%{
        position: relative;
        left: 30px;
        top: 20px;

    }
    100%{
        position: relative;
        left: 70px;
        top: 50px;
    }


}
/*https://www.imooc.com/wenda/detail/416972*/
@keyframes dolphinDown{
    from{

        position: relative;
        left: 30px;
        top: 20px;

    }
    to{
        position: relative;
        left: 70px;
        top: 50px;
    }

}
#dolphin{
    border: blueviolet solid 3px;
    width: 100px;
    height: 100px;
    color: blue;
    /*https://blog.csdn.net/qq_26780317/article/details/80486766*/
    /*https://www.w3school.com.cn/cssref/pr_transform.asp*/
    transform: translateY(150%); /**下移元素**/
    animation: dolphinFly 2s;
    /*https://www.imooc.com/wenda/detail/416972*/
    animation-iteration-count: infinite;
    /*animation-direction: alternate;*/
    /*-ms-transform: translateY(50%); !* IE 9 *!*/
    /*-webkit-transform: translateY(50%); !* Safari 和 Chrome *!*/

}

.dolphin{
    border: blueviolet solid 3px;
    width: 100px;
    height: 100px;
    color: blue;
    /*https://blog.csdn.net/qq_26780317/article/details/80486766*/
    /*https://www.w3school.com.cn/cssref/pr_transform.asp*/
    transform: translateY(150%); /**下移元素**/
    animation: dolphinFly 2s;
    /*https://www.imooc.com/wenda/detail/416972*/
    animation-iteration-count: infinite;
    /*animation-direction: alternate;*/
    /*-ms-transform: translateY(50%); !* IE 9 *!*/
    /*-webkit-transform: translateY(50%); !* Safari 和 Chrome *!*/

}

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}
